<!--
  -typeName:value-key显示内容（String）
  -emtKey:传值入父对应的方法名（String）
  -columns：columns（Array）
  -->
<template>
    <div>
        <van-popup v-model="show" position="bottom">
            <van-picker show-toolbar :value-key="typeName" :default-index="1" :columns="columns" @cancel="onCancel" @confirm="onConfirm">
                <template #title>
                    <div class="color999 f14">
                        {{title}}
                    </div>
                </template>
            </van-picker>
        </van-popup>
    </div>
</template>

<script>
export default {
    props: {
        typeName: String,
        columns: Array,
        emtKey: {
            required: false,
            type: String,
            default: 'back'
        },
        title: {
            required: false,
            type: String,
            default: '类型选择'
        }
    },
    data () {
        return {
            show: false,
        }
    },
    methods: {
        selectCredit () {
            this.show = true;
        },
        typeSex () {
            this.show = true;
        },
        selectAge () {
            this.show = true;
        },
        showFun (v) {
            this.show = v;
        },
        onCancel () {
            this.show = false;
            console.log("李寻欢");
        },
        onConfirm (value) {
            this.show = false;
            this.$emit(this.emtKey, value)
            // this.$emit('selectCredit', value)
            // this.$emit('getSex', value)
            // this.$emit('getAge', value)

        }
    }

};
</script>

<style lang="scss" scoped>
//+
/deep/.van-picker__cancel,
.van-picker__confirm {
  color: #333;
  font-size: 17px;
}
/deep/.van-picker__confirm {
  color: #ff8f44;
  font-size: 17px;
}
//+
.van-hairline::after,
.van-hairline--bottom::after {
  border: none;
}
</style>